<template>
  <router-view />
  <play-bar></play-bar>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  setup() {
    const store = useStore()
    // 当前音乐是播放还是暂停
    const playOrPause = localStorage.getItem('playOrPause')
    // 用户信息
    const profile = localStorage.getItem('profile')
    // 当前播放的音乐
    const currentPlaying = localStorage.getItem('currentPlaying')
    // 用户信息
    const account = localStorage.getItem('account')
    // 当前播放列表
    const playlist = localStorage.getItem('playlist')
    const token = localStorage.getItem('token')
    // 当前播放音乐在列表中的索引
    const playIndex = localStorage.getItem('playIndex')
    // 音乐播放进度
    const audioProgress = localStorage.getItem('audioProgress')

    if (playOrPause) {
      store.commit('setPlayOrPause', playOrPause ?? '')
    }
    if (profile || account || token) {
      store.commit('setLoginInfo', {
        profile: profile ? JSON.parse(profile) : {},
        account: account ? JSON.parse(account) : {},
        token,
      })
    }
    if (currentPlaying) {
      store.commit(
        'setCurrentPlaying',
        currentPlaying ? JSON.parse(currentPlaying) : {}
      )
    }
    if (playlist) {
      store.commit('setPlaylist', playlist ? JSON.parse(playlist) : [])
    }
    if (playIndex) {
      store.commit('setPlayIndex', Number(playIndex))
    }
    if (audioProgress) {
      store.commit('setAudioProgress', Number(audioProgress))
    }
  },
})
</script>

<style lang="less">
#app {
  max-width: 375px;
  margin: 0 auto;
}
.van-toast--text {
  border-radius: 200px !important;
}
.van-tabbar.van-tabbar--fixed {
  left: unset;
  max-width: 375px;
  margin: auto;
}
</style>
